<template>
  <div class="container">
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside :style="aside">
        <Menus />
      </el-aside>
      <el-container >
        <el-header style="text-align: right; font-size: 12px;padding:0;height: 50px">
          <Header />
        </el-header>
        <tags-view />
        <el-main ref="mainPage">
          <transition name="fade-transform" mode="out-in">
            <!-- <keep-alive > -->
            <keep-alive :include="cachedViews">
              <router-view ref="mainPage" class="main-content" :key="key" />
            </keep-alive>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import MainNav from '../components/MainNav/index.vue'
import Menus from '../components/MainNav/Menus.vue'
import Header from '../components/MainNav/Header.vue'
import TagsView from '../components/TagsView/index.vue';

export default {
  data() {
    return {
      isCollapse: true
    }
  },
  components: {
    MainNav,
    Menus,
    Header,
    TagsView
  },
  mounted() {
    this.$bus.$on('toggleClick', (sf) => {
      this.isCollapse = !this.isCollapse
    })
    this.$bus.$on("onScroll",(flag) =>{
      console.log(this.$refs.mainPage)
    })
  },
  computed: {
    // jisuan() {
    //   return this.isCollapse ? 'marginLeft: 210px' : 'marginLeft: 10px'
    // }
    aside() {
      return this.isCollapse ? 'width: 200px' : 'width: 65px'
    },
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

<style scoped>
.container{
  height: 100%;
}
.container :deep(.el-aside) {
  flex-shrink: 0 !important;;
}
.container :deep(.el-header){
  /* position: fixed; */
    width: 100%;
    z-index: 1000;
}

.container :deep(.el-main){
  /* position:relative;
  top:40px */
  padding:5px 20px
}
.main-content{
  position: relative;
}
</style>